<template>
    <z-paging>
        <view style="width: 100%; position: absolute;z-index: 99999;top: 0;
        height: 200rpx">
            <hedsty></hedsty>
        </view>

        <view class="one_box">欢迎使用摩根潮玩</view>
        <view class="two_box">激发无限大的想象</view>
        <view class="pic_box">
            <image src="https://morgan.dingxians.cn/static/login/login.png" mode="scaleToFill" />
        </view>
        <view class="phone_input_box">
            <u--input placeholder="请输入手机号码" color="rgba(255, 255, 255, 1)" v-model="phonevalue"
                @change="change" mode="number"></u--input>
        </view>
        <view class="phone_code_box">
            <view class="code_box">
                <u--input placeholder="请输入验证码" color="rgba(255, 255, 255, 1)" v-model="codeValue"
                    @change="codeValuechange" mode="number"></u--input>
            </view>
            <view class="huoqucode_box" @click="getCode" v-if="status">获取验证码</view>
            <view class="huoqucode_box" v-else>{{ time }}</view>
        </view>
        <view class="denglu_box" @click="goLogin">登录/注册</view>
        <view class="xieyi_box">
            <view class="xieyista_box" @click="agrStabtn">
                <image src="https://morgan.dingxians.cn/static/login/wsel.png" v-if="!agreeSta" mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/login/sel_imag.png" v-else mode="scaleToFill" />
            </view>
            <view class="xieyitetx_box">已阅读并同意<text
                    @click="$router('/userPage/agree/agreen?status=' + 'user_agree' + '&title=' + '用户协议')">《用户协议》</text>和<text
                    @click="$router('/userPage/agree/agreen?status=' + 'privacy' + '&title=' + '隐私政策')">《隐私政策》</text>
            </view>
        </view>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            phonevalue: '',
            codeValue: '',
            status: true,
            time: 60,
            agreeSta: false
        }
    },
    methods: {
        change(e) {
            this.phonevalue = e
        },
        codeValuechange(e) {
            this.codeValue = e
        },
        agrStabtn() {
            this.agreeSta = !this.agreeSta
        },
        getCode() {
            if (!this.phonevalue) {
                this.$msg('请输入手机号')
            } else if (!this.agreeSta) {
                this.$msg('请同意协议')
            } else {
                if (this.timer) {
                    clearInterval(this.timer)
                }
                this.status = false;
                this.timer = setInterval(() => {
                    this.time--;
                    if (this.time == 0) {
                        clearInterval(this.timer)
                        this.time = 60
                        this.status = true;
                    }
                }, 1000)
                let data = {
                    mobile: this.phonevalue
                }
                this.$Request.get(this.$api.logins.commonSendCode, data).then(res => {
                    if (res.code == 200) {
                        console.log(res)
                    }
                })
            }
        },
        myLogin() {

        },
                goLogin() {
                    if (!this.phonevalue) {
                        this.$msg('请输入手机号')
                    } else if (!this.agreeSta) {
                        this.$msg('请同意协议')
                    } else if (!this.codeValue) {
                        this.$msg('请输入验证码')
                    } else {
                        console.log('登录')
                        let that = this
                        // #ifdef MP-ALIPAY
        				my.getAuthCode({
                            scopes: 'auth_user',
                            success: function (res) {
                                let data = {
                                    mobile: that.phonevalue,
                                    code: that.codeValue,
                                    authCode: res.authCode
                                }
                                that.$Request.post(that.$api.logins.usersLogin, data).then(res => {
                                    if (res.code == 200) {
                                        uni.setStorageSync('token', res.data.token)
                                        uni.switchTab({
                                            url: '/pages/index/index'
                                        })
                                    }
                                })
                            }
                        });
                        
                        // #endif
        				// #ifndef MP-ALIPAY
        				        let data = {
        				            mobile: that.phonevalue,
        				            code: that.codeValue
        				        }
        				        that.$Request.post(that.$api.logins.usersLogin, data).then(res => {
        				            if (res.code == 200) {
        				                uni.setStorageSync('token', res.data.token)
        				                uni.switchTab({
        				                    url: '/pages/index/index'
        				                })
        				            }
        				        })
        				
        				// #endif
        
                    }
                },
    }
}
</script>
<style lang="scss" scoped>
.one_box {
    width: 100%;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 52rpx;
    color: #FFFFFF;
    line-height: 50rpx;
    box-sizing: border-box;
    top: 425rpx;
    padding-left: 81rpx;
    position: absolute;
    z-index: 2;
}

.two_box {
    position: absolute;
    width: 100%;
    height: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    box-sizing: border-box;
    top: 500rpx;
    padding-left: 81rpx;
    color: #FFFFFF;
    line-height: 26rpx;
    z-index: 2;
}

.pic_box {
    width: 430rpx;
    height: 450rpx;
    position: absolute;
    top: 176rpx;
    right: 44rpx;
    z-index: 1;

    image {
        width: 100%;
        height: 100%;
    }
}

.phone_input_box {
    margin: auto;
    margin-top: 621rpx;
    width: 605rpx;
    height: 90rpx;
    border-bottom: 2rpx solid rgba(216, 216, 216, .2);
    display: flex;
    align-items: center;
    margin-bottom: 59rpx;
}

.phone_code_box {
    margin: auto;
    width: 605rpx;
    height: 90rpx;
    border-bottom: 2rpx solid rgba(216, 216, 216, .2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 59rpx;

    .code_box {
        width: 60%;
        height: 100%;
    }

    .huoqucode_box {
        min-width: 100rpx;
        height: 90rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FF5D5D;
        line-height: 90rpx;
        text-align: center;
    }
}

.denglu_box {
    margin: auto;
    margin-top: 125rpx;
    width: 560rpx;
    height: 88rpx;
    background: linear-gradient(180deg, #FF4242, #FF6666);
    border-radius: 44rpx;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 88rpx;
    text-align: center;
    margin-bottom: 400rpx;
}

.xieyi_box {
    width: 100%;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .xieyista_box {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;

        image {
            width: 30rpx;
            height: 30rpx;
        }
    }

    .xieyitetx_box {
        height: 40rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #E2E2E2;
        line-height: 44rpx;

        text {
            color: rgba(254, 67, 67, 1);
        }
    }
}
</style>